<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:layout="http://www.urltrag.net.nz/thymeleaf/layout">

<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>直播列表</title>

<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" />
<link th:href="@{/css/animate.css}" rel="stylesheet" />
<link th:href="@{/css/style.css}" rel="stylesheet" />

</head>

<body>

	<div id="wrapper">

		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav metismenu" id="side-menu">
					<li class="nav-header"><div class="dropdown profile-element">
							<span><img alt="image" class="img-circle"
								th:src="@{/img/a7.jpg}" /></span><a data-toggle="dropdown"
								class="dropdown-toggle" href="#"><span class="clear">
									<span class="block m-t-xs"> <strong class="font-bold" th:text="${user.name}"></strong></span> <span class="text-muted text-xs block">程序员鼓励师<b
										class="caret"></b></span>
							</span> </a>
							<ul class="dropdown-menu animated fadeInRight m-t-xs">
								<li><a href="./logout">退出</a></li>
							</ul>
						</div>
						<div class="logo-element">AU+</div></li>
					<li><a href="./liveList"><i class="fa fa-diamond"></i> <span
							class="nav-label">直播列表</span></a></li>
				</ul>
			</div>
		</nav>
		
		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top" role="navigation"
					style="margin-bottom: 0">
					<div class="navbar-header">
						<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
							href="#"><i class="fa fa-bars"></i> </a>
						<form role="search" class="navbar-form-custom"
							action="search_results.html">
							<div class="form-group">
								<input type="text" placeholder="你要找什么，请戳我..."
									class="form-control" name="top-search" id="top-search" />
							</div>
						</form>
					</div>
					<ul class="nav navbar-top-links navbar-right">
						<li><span class="m-r-sm text-muted welcome-message">欢迎来到AU+</span></li>
						<li><a href="./logout"><i class="fa fa-sign-out"></i>
								退出</a></li>
					</ul>
				</nav>
			</div>
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-2">
					<h2>
						<a href="./publisher"><button type="submit"
								class="btn btn-primary block full-width m-b">我要发布直播</button></a>
					</h2>
				</div>
			</div>
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row">
					<div th:each="liveRedis : ${liveList}" class="col-lg-4">
						<div class="contact-box">
							<a th:href="@{/live(keyname=${liveRedis.keyName})}">
								<div class="col-sm-4">
									<div class="text-center">
										<img alt="image" class="img-circle m-t-xs img-responsive" th:src="@{/img/a2.jpg}" />
										<div th:text="${liveRedis.userName}" class="m-t-xs font-bold">Graphics designer</div>
									</div>
								</div>
								
								<div class="col-sm-8">
									<h3>
										<label>房间名字：</label><strong th:text="${liveRedis.liveName}">John Smith</strong>
									</h3>
									
									<address>
										<label>直播简介：</label><strong th:text="${liveRedis.content}">Twitter, Inc.</strong>
									</address>
									
									<label>直播间的stream name：</label><strong th:text="${liveRedis.keyName}"/>
								</div>
								<div class="clearfix"></div>
							</a>
						</div>
					</div><!-- 直播列表 -->
				</div>
			</div>
		</div>
		
<!-- 		<div class="footer"> -->
<!-- 			<div class="pull-right"> -->
<!-- 				10GB of <strong>250GB</strong> Free. -->
<!-- 			</div> -->
<!-- 			<div> -->
<!-- 				<strong>Copyright</strong> Example Company &copy; 2014-2015 -->
<!-- 			</div> -->
<!-- 		</div> -->
		
	</div>
	
	<!--Mainly scripts -->
	<script th:src="@{/js/jquery-2.1.1.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
	<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
	<!--Custom and plugin javascript -->
	<script th:src="@{/js/inspinia.js}"></script>
	<script th:src="@{/js/plugins/pace/pace.min.js}"></script>
	<script>
		$(document).ready(function() {
			$('.contact-box').each(function() {
				animationHover(this, 'pulse');
			});
		});
	</script>
</body>
</html>